<template>
	<view class="comAll">
		<view class="tagGroup" :class="{'tagGroupHeight': currTag === 4  && type === 'report'}">
			<view :class="{'active':currTag === item.value}" class="tagBtn" :style="'width:'+100/tagInfo.length+'%'" v-for="(item, index) in tagInfo"
			 :key="index" @click="changeTag(item.value)">
				<text>{{item.title}}</text>
				<view class="tag" v-if="item.tagNum">
					{{item.tagNum}}
				</view>
			</view>
		</view>

		<view class="subTagGroup" v-if="currTag === 4 && type === 'report'">
			<view :class="{'subActive':currSubTag === item.value}" class="subTagBtn" :style="'width:'+100/subTagInfo.length+'%'" v-for="(item, index) in subTagInfo"
			 :key="index" @click="changeSubTag(item.value)">
				<text>{{item.title}}</text>
				<view class="tag" v-if="item.tagNum">
					{{item.tagNum}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tagInfo: Array,
			currTag: Number,
			subTagInfo: Array,
			type: String,
			currSubTag: Number,
		},
		data() {
			return {

			}
		},
		methods: {
			changeTag(value) {
				this.$emit('changeTag', {
					value: value,
				})
			},
			changeSubTag(value) {
				this.$emit('changeSubTag', {
					value: value,
				})
			}
		},
	}
</script>

<style scoped>
	.comAll {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		height: 100%;
	}
	.tagGroup{
		display: flex;
		justify-content: flex-start;
		background-color: #FFF;
		border-radius: 10upx;
		box-shadow: 0 0 15upx 5upx rgba(179, 31, 31, 0.15);
		width:100%;
	}
	.tagGroupHeight{
		height:43% !important;
	}
	.tagBtn {
		margin: 0;
		position: relative;
		text-align: center;
		display: flex;
		padding: 17upx;
		color: #6f6f6f;
		font-size: 32upx;
	}

	.tagBtn:first-child {
		border-bottom-left-radius: 10upx;
		border-top-left-radius: 10upx;
	}

	.tagBtn:last-child {
		border-bottom-right-radius: 10upx;
		border-top-right-radius: 10upx;
	}

	.active {
		background-color: #f7533e;
		color: #FFF;
	}

	.tagBtn text {
		width: 100%;
		margin: auto 0;
		text-align: center;
	}

	.tag {
		width: 30upx;
		height: 30upx;
		background-color: #f7533e;
		border-radius: 50%;
		position: absolute;
		margin: auto;
		top: -30upx;
		left: 110upx;
		bottom: 0;
		right: 0;
		font-size: 20upx;
		line-height: 30upx;
		color: #FFF;
	}
	
	.subTagGroup{
		display: flex;
		justify-content: flex-start;
		background-color: #fef5f5;
		border-radius: 10upx;
		box-shadow: 0 0 18upx rgba(11, 11, 11, 0.06);
		width:100%;
		height:30%;
		line-height: 30%;
	}
	
	.subTagBtn{
		margin: 0;
		position: relative;
		text-align: center;
		display: flex;
		padding: 17upx;
		color: #6f6f6f;
		font-size: 24upx;
	}
	
	.subTagBtn:first-child {
		border-bottom-left-radius: 10upx;
		border-top-left-radius: 10upx;
	}
	
	.subTagBtn:last-child {
		border-bottom-right-radius: 10upx;
		border-top-right-radius: 10upx;
	}
	
	.subActive {
		background-color: #ffc8c7;
		color: #fa4f4f;
	}
	
	.subTagBtn text {
		width: 100%;
		margin: auto 0;
		text-align: center;
	}
</style>
